<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title></title>
    <style>
        element.style {
            left:50px
        }

    </style>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrop.css">
    <link rel="stylesheet" href="/static/css/index.css"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
</head>
<body>

<!--主体-->
<div class="main clearfix">
    <div class="main-left">
        <div class="border-container containertop">
            <h5 class="name-title tile-size-color">数据分类</h5>
            <div id="radar">
                <div class="radarkong">
                    <p class="tile-size-color">
                        数据量 :<span class="Totalequipment" id="pie_total"></span>
                        统计时间 :<span id="pie_time">2019.03.26 15:28</span>
                    </p>
                </div>
                <!--饼状图-->
                <div class="pie-chart" id="pie-chart"></div>
            </div>
        </div>

        <div class="border-container containerbottom">
            <div class="name-title tile-size-color">高分电影</div>
            <div class="graduateyear">
                <div class="bar-chart" id="bar-chart">经典电影</div>

            </div>
        </div>
    </div>


    <div class="main-middle">

        <div class="name-title tile-size-color" style="left: 1000px;z-index: 9999;top: 11px">影评分析</div>
        <div class="border-container containertop">
            <div id="mapadd">
                <div class="progress2-chart" id="progress2-chart"></div>
            </div>
        </div>


        <div class="border-container containerbottom borderno-container">
            <ul class="teacher-pie clearfix">
                <li class="teacherList">
                     <div class="name-title tile-size-color" style="z-index: 9999;">经典电影</div>
                    <div class="name-title tile-size-color"></div>
                    <div class="line-chart" id="line-chart"></div>
                </li>
                <li class="teacherList">
                    <div class="name-title tile-size-color" style="z-index: 9999;">最新电影评分占比</div>
                    <div class="bars-chart" id="bars-chart"></div>
                </li>
            </ul>
        </div>

    </div>


    <div class="main-right">
        <div class="border-container containertop">
            <div class="name-title tile-size-color">热门电影</div>
            <div class="progress1-chart" id="progress1-chart"></div>
        </div>
        <div class="border-container containerbottom">
            <div class="name-title tile-size-color">各分类数据Top1</div>
            <div id="radar-chart" class="radar-chart"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script src="/static/js/echarts-wordcloud.min.js"></script>
{#        <script type="text/javascript" src="/static/js/new_file.js"></script>#}
{#<script type="text/javascript" src="/static/js/maps.js"></script>#}
<script type="text/javascript">
</script>
</body>
</html>


<script>
    $(function () {
        pieChar();
        barChar([20, 60, 82, 60]);
        linchar();
        barschar();
        radarchar();
        progress1char();
        progress2char();
        mapchar();
    });
    window.onresize = function () {
        pieChart.resize();
        barChart.resize();    //若有多个图表变动，可多写
        linchart.resize();
        barschart.resize();
        radarchart.resize();
        progress1chart.resize();
        progress2chart.resize();
        mapchart.resize()
    }


    //饼状图
    var pieChart = "";

    function pieChar() {
        // 取数据
        $.ajax({
            url: "/api/pie",
            type: 'GET',
            async: false,
            success: function (Response) {

                $('#pie_total').text(Response.total)
                $('#pie_time').text(Response.time)
                pieChart = echarts.init(document.getElementById("pie-chart"));
                option = {
                    color: ["blue", "green", "yellow", "red", "pink","orange", "orange", "purple"],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '分类数据',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '60%'],
                            center: ["50%", "42%"],
                            label: {
                                normal: {
                                    position: 'outside',
                                    formatter: "{b}:{d}%"
                                }
                            },
                            data: Response.data
                        }
                    ]
                };
                pieChart.setOption(option);

            }
        });
    }


    //柱状图
    var barChart = "";

    function barChar() {
        // 取数据
        $.ajax({
            url: "/api/bar",
            type: 'GET',
            async: false,
            success: function (Response) {
                barChart = echarts.init(document.getElementById("bar-chart"));
                option = {

                    color: ['#071527'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: '', // 默认为直线，可选为：'line' | 'shadow'
                        },

                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '2%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Response.x_list,
                            axisTick: {
                                alignWithLabel: true,
                            },

                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#d9d9d9', //左边线的颜色
                                    width: '2', //坐标线的宽度
                                },
                            },
                            axisLabel: {
                                textStyle: {
                                    //改变刻度字体样式
                                    color: '#666',
                                    fontSize: 14,
                                },
                                formatter: function (value) {
                                    return value.split('').join('\n')
                                },
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            formatter: '{value} (元)', //  单位
                            axisLabel: {
                                textStyle: {
                                    //改变刻度字体样式
                                    color: '#666',
                                },
                            },
                            axisLine: {
                                show: false, //y轴线消失
                            },
                            axisTick: {
                                show: false, //y轴坐标点消失
                            },
                        },
                    ],
                    series: [
                        {
                            name: '日增长率',
                            type: 'bar',
                            barWidth: '8',
                            data: Response.y_list,
                            itemStyle: {
                                //柱形图圆角，鼠标移上去效果
                                emphasis: {
                                    barBorderRadius: [10, 10, 10, 10],
                                },

                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [10, 10, 10, 10],
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: '#5c2ef5', // 100% 处的颜色
                                            },
                                            {
                                                offset: 0.3,
                                                color: '#5469f8', // 60% 处的颜色
                                            },
                                            {
                                                offset: 0.8,

                                                color: '#508ff9', // 60% 处的颜色
                                            },
                                            {
                                                offset: 1,

                                                color: '#7ac1f3 ', // 0% 处的颜色
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                        },
                    ],
                }
                barChart.setOption(option)

            }
        });


    }


    //折线图
    var linchart = "";

    function linchar() {
        // 取数据
        $.ajax({
            url: "/api/line",
            type: 'GET',
            async: false,
            success: function (Response) {
                linchart = echarts.init(document.getElementById("line-chart"));

                const datas = Response.res_list
                const myColor = ["#51FC4E", "#4C5FF5", "#FFE660", "#79F1FF", "#51FC4E", "#4C5FF5", "#FFE660", "#79F1FF"].reverse();
                const xData = datas.map((item) => item.name);
                const yData = datas.map((item) => item.value);
                const max = Math.ceil(Math.max(...yData) * 1.2);
                const maxData = [max, max, max, max, max, max, max, max, max];
                option = {
                    backgroundColor: '#040f3c',
                    grid: {
                        left: "15%",
                        right: "8%",
                        bottom: "5%",
                        top: "10%",
                        containLabel: false,
                    },
                    xAxis: [
                        {
                            show: false,
                        },
                        {
                            show: false,
                        },
                    ],
                    yAxis: [
                        {
                            show: false,
                            inverse: true,
                            data: yData,
                        },
                        {
                            show: true,
                            data: yData,
                            offset: -45,
                            position: "right",
                            axisLabel: {
                                lineHeight: 0,
                                verticalAlign: "bottom",
                                fontSize: 13,
                                color: "#fff",
                                formatter: "{value}",
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: "进度",
                            show: true,
                            type: "bar",
                            barGap: "-100%",
                            xAxisIndex: 1,
                            barWidth: 4,
                            itemStyle: {
                                borderRadius: 4,
                                color: (params) => {
                                    var num = myColor.length;
                                    return {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#0F1F45",
                                            },
                                            {
                                                offset: 1,
                                                color: myColor[params.dataIndex % num],
                                            },
                                        ],
                                    };
                                },
                            },
                            label: {
                                show: false,
                            },
                            // max: 0,
                            labelLine: {
                                show: false,
                            },
                            z: 2,
                            data: yData,
                            animationDelay: 1000,
                            animationDuration: 1000
                        },
                        {
                            name: "外圆",
                            type: "scatter",
                            emphasis: {
                                scale: false,
                            },
                            xAxisIndex: 1,
                            symbolSize: 10,
                            itemStyle: {
                                color: (params) => {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num];
                                },
                                shadowColor: "rgba(255, 255, 255, 0.5)",
                                shadowBlur: 5,
                                borderWidth: 1,
                                opacity: 1,
                            },
                            z: 2,
                            data: yData,
                            animationDelay: 1500,
                            animationDuration: 1000
                        },
                        {
                            name: "年份",
                            z: 1,
                            show: true,
                            type: "bar",
                            xAxisIndex: 1,
                            barGap: "-100%",
                            barWidth: 4,
                            itemStyle: {
                                borderRadius: 4,
                                color: "rgba(13, 55, 78, 1)",
                            },
                            label: {
                                show: true,
                                verticalAlign: "middle",
                                position: "left",
                                fontSize: 14,
                                color: "#fff",
                                formatter: function (data) {
                                    return xData[data.dataIndex] + "：";
                                },
                            },
                            data: maxData,
                        },
                    ],
                };


                linchart.setOption(option)
            }
        });
    }


    // 柱状图2
    var barschart = ""

    function barschar() {
        // 取数据
        $.ajax({
            url: "/api/b2ars",
            type: 'GET',
            async: false,
            success: function (Response) {
                barschart = echarts.init(document.getElementById("bars-chart"));
                let color = ['#454bb3', '#a17131', '#a3a71a', '#0aa75b', '#0a7fb3',"blue", "green", "yellow", "red", "pink","orange", "orange", "purple"];
                data = Response.res_list;
                let max = Math.max(...data.map((item) => item.value));
                let sum = eval(data.map((item) => item.value).join('+'));
                option = {
                    backgroundColor: '#040f3c',
                    angleAxis: {
                        show: 0,
                        clockwise: false,
                        max: max + max / 3,
                    },
                    radiusAxis: {
                        type: 'category',
                        data: data.map((item) => {
                            return item.name + ':' + '　' + ((item.value / sum) * 100).toFixed() + '%';
                        }),
                        z: 10,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            color: '#fff',
                            align: 'left',
                            margin: -10,
                        },
                    },
                    polar: {
                        show: 0,
                        center: ['50%', '50%'],
                    },
                    series: [
                        {
                            type: 'bar',
                            data: data.map((item, index) => {
                                return {
                                    value: item.value,
                                    name: item.name,
                                    itemStyle: {
                                        color: color[index],
                                    },
                                };
                            }),
                            label: {
                                show: true,
                                position: 'top',
                            },
                            barWidth: 10,
                            coordinateSystem: 'polar',
                        },
                    ],
                };


                barschart.setOption(option)

            }
        });
    };


    // 雷达图
    var radarchart = "";

    function radarchar() {

        // 取数据
        $.ajax({
            url: "/api/radar",
            type: 'GET',
            async: false,
            success: function (Response) {

                radarchart = echarts.init(document.getElementById("radar-chart"));
                option = {
                    color: ['#623ad1', '#3383fc'],
                    tooltip: {},
                    radar: [
                        {
                            indicator: Response.indicator,
                            center: ['50%', '60%'],
                            radius: '65%',
                            startAngle: 90,
                            name: {
                                formatter: '{value}',
                                textStyle: {
                                    fontSize: 12, //外圈标签字体大小
                                    color: '#FFF' //外圈标签字体颜色
                                }
                            },
                            splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                                show: true,
                                areaStyle: { // 分隔区域的样式设置。
                                    color: [], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                                }
                            },
                            axisLine: { //指向外圈文本的分隔线样式
                                lineStyle: {
                                    color: '#24214e'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#24214e', // 分隔线颜色
                                    width: 1, // 分隔线线宽
                                }
                            }
                        },],
                    series: [{
                        name: '分类下载量TOP1',
                        type: 'radar',
                        data: [
                            {
                                name: "统计截止时间：" + Response.time,
                                value: Response.data,
                                areaStyle: {
                                    normal: { // 单项区域填充样式
                                        opacity: 1 // 区域透明度
                                    }
                                },
                                symbolSize: 0, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                            },
                        ]
                    }]
                };
                radarchart.setOption(option)


            }
        });


    }


    // 进度条1
    var progress1chart = "";

    function progress1char() {
        // 取数据
        $.ajax({
            url: "/api/b3ars",
            type: 'GET',
            async: false,
            success: function (Response) {
                progress1chart = echarts.init(document.getElementById("progress1-chart"));
                var colorList = ['#7cf36c', '#e6cf4e', '#20d180', '#8e2b8b', '#f36c6c'];
                var datas = Response.res_list;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: 0,
                        right: '5%',
                        top: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                        type: 'value'

                    },
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                margin: 30
                            }
                        },
                        data: datas.map(item => item.name),
                        axisLabel: {
                            margin: 50,
                            fontSize: 14,
                            align: 'left',
                            color: '#333',
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: colorList[0],
                                    width: 30,
                                    height: 30,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: colorList[1],
                                    width: 30,
                                    height: 30,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: colorList[2],
                                    width: 30,
                                    height: 30,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                b: {
                                    color: '#fff',
                                    backgroundColor: colorList[3],
                                    width: 30,
                                    height: 30,
                                    align: 'center',
                                    borderRadius: 2
                                }
                            },
                            formatter: function (params) {
                                var index = datas.map(item => item.name).indexOf(params);
                                index = index + 1;
                                if (index - 1 < 3) {
                                    return [
                                        '{a' + index + '|' + index + '}'
                                    ].join('\n')
                                } else {
                                    return [
                                        '{b|' + index + '}'
                                    ].join('\n')
                                }
                            }
                        }
                    }, {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        data: datas.map(item => item.value),
                        axisLabel: {
                            show: true,
                            fontSize: 14,
                            color: '#333',
                            formatter: '{value}'
                        }
                    }],
                    series: [{
                        z: 2,
                        name: 'value',
                        type: 'bar',
                        barCategoryGap: '40%',
                        barGap: '20%',
                        barWidth: 13,
                        data: datas.map((item, i) => {
                            var itemStyle = {
                                color: i > 3 ? colorList[3] : colorList[i],
                                barBorderRadius: [10, 10, 10, 10, 10],
                            }
                            return {
                                value: item.value,
                                itemStyle: itemStyle
                            };
                        }),
                        label: {
                            normal: {
                                color: '#666',
                                show: true,
                                position: [0, '-18px'],
                                textStyle: {
                                    fontSize: 14,
                                },
                                formatter: function (a, b) {
                                    return a.name
                                }
                            }
                        }
                    }

                    ]
                };

                progress1chart.setOption(option)
            }
        });


    }


    //   词云
    var progress2chart = "";

    function progress2char() {
        // 取数据
        $.ajax({
            url: "/api/ciyun",
            type: 'GET',
            async: false,
            success: function (Response) {

                progress2chart = echarts.init(document.getElementById("progress2-chart"));

                JosnList = Response.res_list;

                option = {
                    tooltip: {
                        show: true,
                        // formatter: (params) => {
                        //     const { name, value } = params;
                        //     return `${name}:${value}`;
                        // },
                    },

                    series: [
                        {
                            type: 'wordCloud',
                            //size: ['9%', '99%'],
                            sizeRange: [14, 50],
                            //textRotation: [0, 45, 90, -45],
                            rotationRange: [-45, 90],
                            shape: 'circle',
                            textPadding: 0,
                            width: '80%',
                            // 画布高
                            height: '80%',
                            autoSize: {
                                enable: true,
                                minSize: 6,
                            },
                            textStyle: {
                                normal: {
                                    color: function () {
                                        return (
                                            'rgb(' +
                                            [Math.round(Math.random() * 256), Math.round(Math.random() * 256), Math.round(Math.random() * 256)].join(
                                                ','
                                            ) +
                                            ')'
                                        );
                                    },
                                },
                                emphasis: {
                                    shadowBlur: 2,
                                    shadowColor: '#333',
                                },
                            },
                            data: JosnList,
                        },
                    ],
                };


                progress2chart.setOption(option)

            }
        });


    }


</script>

